/**
 团体报名
*/
<style lang="scss" scoped>
.operate-exam-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
    .exam-form {
        padding-right: 10px;
    }
    .exam-form ::v-deep {
        .el-date-editor.el-input {
            width: 100% !important;
        }
        .editor-custom-btn-container {
            display: none;
        }
        .tinymce-container {
            margin: 0 !important;
        }
    }
    .title {
        font-size: 18px;
    }
    .el-divider--horizontal {
        margin: 10px 0 20px 0 !important;
    }
    .operate-btn-container {
        border-top: 1px solid #ebeef5;
        padding: 20px;
        margin-bottom: 30px;
    }
    .row-bg {
        margin: 30px 0 30px 0;
    }
}
</style>
<template>
    <div>
        <div class="operate-exam-container" v-if="indexKey === 1">
            <div style="height: 30px">
                <el-breadcrumb style="float: left" separator="/">
                    <el-breadcrumb-item :to="{ path: '/examinationRegistration' }">
                        <span @click="reback()">{{ $t('竞赛报名') }}</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>{{ '团体报名' }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-card
                style="padding: 0 !important"
                shadow="never"
                v-loading="loading"
                body-style="padding: 24px;"
            >
                <el-row type="flex" class="row-bg" justify="space-between">
                    <h2 style="color: #101010; font-weight: bold">{{ $t('团体报名') }}</h2>
                    <el-button @click="reback">{{ $t('requirement.back') }}</el-button>
                </el-row>
                <hr style="border-top: 2px solid #eee" />
                <div class="box">
                    <el-row>
                        <el-form ref="form" :model="form">
                            <div>
                                <h1 style="color: #101010; font-weight: bold; text-align: center">
                                    {{ dataList.projectName }}
                                </h1>
                            </div>
                            <div v-html="dataList.comment"></div>
                            <el-row type="flex" class="row-bg" justify="center">
                                <el-button type="primary" @click="exportAdd">
                                    {{ $t('我要报名') }}
                                </el-button>
                            </el-row>
                        </el-form>
                    </el-row>
                </div>
            </el-card>
        </div>
        <!-- 新增 -->
        <div v-if="indexKey === 2">
            <groupRegistrationAdd
                @change-exam="changeExam"
                ref="addFinom"
                @change-add="changeAdd"
                :compile="compile"
                :dataSignUp="dataList"
            ></groupRegistrationAdd>
        </div>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import groupRegistrationAdd from './groupRegistrationAdd'

import interAcaConferenceApi from 'common/src/api/internationalCommunication/interAcaConference'
import interManagementApi from 'common/src/api/externalExchange/interdiSciplinaryManagement'
import { findTeacherInfoList } from 'common/src/api/studentinfo'
import forumProject from 'common/src/api/academicForums/forumProject'

export default {
    components: {
        groupRegistrationAdd,
    },
    props: {
        compile: {
            type: String,
            default: '',
        },
        dataList: {
            type: Object,
        },
    },
    data() {
        // 校验手机号码
        let validateNum = (rule, value, callback) => {
            let regExp = /^1[23456789]\d{9}$/
            if (!regExp.test(value)) {
                callback(new Error(this.$t('projectApplication.validateStudentPhone')))
            } else {
                callback()
            }
        }
        // 验证电子邮箱
        let validateNumEmail = (rule, value, callback) => {
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (!reg.test(value) || value === '') {
                return callback(new Error(this.$t('interdisciplinaryManagement.pleaseEnter')))
            }
            return callback()
        }

        let cannotEnter = (rule, value, callback) => {
            let reg = /[`$]/im
            if (reg.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback(new Error(this.$t('internship.pleaseEnter')))
            }
            return callback()
        }
        return {
            indexKey: 1, // 面包屑
            queryForm: {},
            academicAchieveTable: {
                studentList: [],
            },
            formData: {
                name: '',
            },
            editModel: false,
            oneSubjects: [],
            options: {
                englisNameSchool: [],
                nameSchool: [],
                approver: [],
                studentList: [],
                regionList: [],
                oneSubjects: [],
            },
        }
    },
    created() {
        // this.getList(this.formData)
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        // 返回主页
        changeExam() {
            this.indexKey = 1
            this.$emit('change-exam', 1)
        },
        // 新增
        exportAdd() {
            this.compile = '新增'
            this.indexKey = 2
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE', 'G_GJQU'],
            }
            queryDic(data).then((res) => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                        nationId: 'G_GJQU', // 国别/地区
                    },
                    res.data,
                    this.options
                )
            })
        },
        cancelOperate() {
            this.$refs['addform'].resetFields()
        },
        validateWeight(rule, value, callback) {
            let expReg = /^([0-9]{1,32})(\.\d{1,4})?$/
            if (!value) {
                callback(new Error(this.$t('请输入专项经费')))
            } else if (!expReg.test(value)) {
                callback(new Error(this.$t('请输入大于0的数字,最多四位小数')))
            } else {
                callback()
            }
        },

        reback() {
            this.$emit('change-exam')
        },

        cancelClose() {
            this.$refs['addform'].resetFields()
            for (const key in this.queryForm) {
                if (key == 'studentList') {
                    this.queryForm.studentList = []
                } else {
                    this.queryForm[key] = ''
                }
            }
        },
    },
}
</script>
